<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备状态查询</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">设备状态查询</div>
            
            <!-- 状态统计概览 -->
            <div class="status-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="status-card available">
                            <div class="status-item">
                                <div class="status-number">{{ statusStats.available }}</div>
                                <div class="status-label">可用设备</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="status-card in-transit">
                            <div class="status-item">
                                <div class="status-number">{{ statusStats.inTransit }}</div>
                                <div class="status-label">在途设备</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="status-card maintenance">
                            <div class="status-item">
                                <div class="status-number">{{ statusStats.maintenance }}</div>
                                <div class="status-label">维护中</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="status-card reserved">
                            <div class="status-item">
                                <div class="status-number">{{ statusStats.reserved }}</div>
                                <div class="status-label">已预约</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 查询条件 -->
            <div class="query-section">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-input v-model="queryForm.equipmentId" placeholder="设备编号" clearable></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="queryForm.equipmentType" placeholder="设备类型" clearable>
                            <el-option label="冷藏车" value="truck"></el-option>
                            <el-option label="冷藏集装箱" value="container"></el-option>
                            <el-option label="移动冷库" value="mobile_warehouse"></el-option>
                            <el-option label="冷藏拖车" value="trailer"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="queryForm.status" placeholder="设备状态" clearable>
                            <el-option label="可用" value="available"></el-option>
                            <el-option label="在途" value="in_transit"></el-option>
                            <el-option label="维护中" value="maintenance"></el-option>
                            <el-option label="已预约" value="reserved"></el-option>
                            <el-option label="故障" value="fault"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="searchEquipment">查询</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </el-col>
                </el-row>
            </div>

            <!-- 设备状态列表 -->
            <div class="equipment-status-list">
                <el-table :data="equipmentStatusData" border style="width: 100%">
                    <el-table-column prop="equipmentId" label="设备编号" width="120"></el-table-column>
                    <el-table-column prop="name" label="设备名称" width="150"></el-table-column>
                    <el-table-column prop="type" label="设备类型" width="120"></el-table-column>
                    <el-table-column prop="status" label="当前状态" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="getStatusType(scope.row.status)">
                                {{ getStatusText(scope.row.status) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="location" label="当前位置" width="150"></el-table-column>
                    <el-table-column prop="lastUpdate" label="状态更新时间" width="160"></el-table-column>
                    <el-table-column prop="nextMaintenance" label="下次保养" width="120"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="viewDetails(scope.row)">状态详情</el-button>
                            <el-button size="mini" type="primary" @click="viewHistory(scope.row)">使用记录</el-button>
                            <el-button size="mini" type="warning" @click="trackEquipment(scope.row)" v-if="scope.row.status === 'in_transit'">实时跟踪</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 设备状态详情对话框 -->
        <el-dialog title="设备状态详情" :visible.sync="detailDialogVisible" width="60%">
            <div v-if="selectedEquipment">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="detail-section">
                            <h4>基本信息</h4>
                            <p><strong>设备编号：</strong>{{ selectedEquipment.equipmentId }}</p>
                            <p><strong>设备名称：</strong>{{ selectedEquipment.name }}</p>
                            <p><strong>设备类型：</strong>{{ selectedEquipment.type }}</p>
                            <p><strong>当前状态：</strong>
                                <el-tag :type="getStatusType(selectedEquipment.status)">
                                    {{ getStatusText(selectedEquipment.status) }}
                                </el-tag>
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="detail-section">
                            <h4>位置信息</h4>
                            <p><strong>当前位置：</strong>{{ selectedEquipment.location }}</p>
                            <p><strong>GPS坐标：</strong>{{ selectedEquipment.gpsCoordinates }}</p>
                            <p><strong>最后更新：</strong>{{ selectedEquipment.lastUpdate }}</p>
                            <p><strong>行驶里程：</strong>{{ selectedEquipment.mileage }}公里</p>
                        </div>
                    </el-col>
                </el-row>
                
                <div class="detail-section">
                    <h4>运行状态</h4>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="status-indicator">
                                <span class="label">温度状态：</span>
                                <span :class="['value', selectedEquipment.temperatureStatus === 'normal' ? 'normal' : 'abnormal']">
                                    {{ selectedEquipment.temperatureStatus === 'normal' ? '正常' : '异常' }}
                                </span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="status-indicator">
                                <span class="label">油量状态：</span>
                                <span class="value">{{ selectedEquipment.fuelLevel }}%</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="status-indicator">
                                <span class="label">引擎状态：</span>
                                <span :class="['value', selectedEquipment.engineStatus === 'running' ? 'normal' : 'abnormal']">
                                    {{ selectedEquipment.engineStatus === 'running' ? '运行中' : '停止' }}
                                </span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                
                <div class="detail-section">
                    <h4>维护信息</h4>
                    <p><strong>上次保养：</strong>{{ selectedEquipment.lastMaintenance }}</p>
                    <p><strong>下次保养：</strong>{{ selectedEquipment.nextMaintenance }}</p>
                    <p><strong>保养里程：</strong>{{ selectedEquipment.maintenanceMileage }}公里</p>
                    <p><strong>设备状况：</strong>{{ selectedEquipment.condition }}</p>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="detailDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="scheduleAMaintenance" v-if="selectedEquipment && selectedEquipment.status === 'available'">安排保养</el-button>
            </span>
        </el-dialog>

        <!-- 使用记录对话框 -->
        <el-dialog title="历史使用记录" :visible.sync="historyDialogVisible" width="70%">
            <el-table :data="usageHistory" border>
                <el-table-column prop="startDate" label="开始时间" width="140"></el-table-column>
                <el-table-column prop="endDate" label="结束时间" width="140"></el-table-column>
                <el-table-column prop="customer" label="客户名称" width="150"></el-table-column>
                <el-table-column prop="route" label="运输路线" width="200"></el-table-column>
                <el-table-column prop="distance" label="行驶距离(km)" width="120"></el-table-column>
                <el-table-column prop="duration" label="使用时长(天)" width="120"></el-table-column>
                <el-table-column prop="status" label="任务状态" width="100">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === 'completed' ? 'success' : 'warning'">
                            {{ scope.row.status === 'completed' ? '已完成' : '进行中' }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="historyDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="exportHistory">导出记录</el-button>
            </span>
        </el-dialog>

        <!-- 实时跟踪对话框 -->
        <el-dialog title="设备实时跟踪" :visible.sync="trackingDialogVisible" width="80%">
            <div v-if="trackingData">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <div class="map-container">
                            <div id="map" style="height: 400px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
                                <span style="color: #999;">地图显示区域 (集成百度/高德地图)</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="tracking-info">
                            <h4>实时信息</h4>
                            <p><strong>当前位置：</strong>{{ trackingData.currentLocation }}</p>
                            <p><strong>GPS坐标：</strong>{{ trackingData.coordinates }}</p>
                            <p><strong>行驶速度：</strong>{{ trackingData.speed }}km/h</p>
                            <p><strong>行驶方向：</strong>{{ trackingData.direction }}</p>
                            <p><strong>预计到达：</strong>{{ trackingData.estimatedArrival }}</p>
                            
                            <h4>车厢状态</h4>
                            <p><strong>内部温度：</strong>{{ trackingData.temperature }}°C</p>
                            <p><strong>湿度：</strong>{{ trackingData.humidity }}%</p>
                            <p><strong>制冷状态：</strong>{{ trackingData.refrigerationStatus }}</p>
                            
                            <h4>轨迹回放</h4>
                            <el-button size="mini" @click="playTrack">播放轨迹</el-button>
                            <el-button size="mini" @click="pauseTrack">暂停</el-button>
                            <el-button size="mini" @click="resetTrack">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="trackingDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="downloadTrackData">下载轨迹数据</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    statusStats: {
                        available: 25,
                        inTransit: 8,
                        maintenance: 3,
                        reserved: 12
                    },
                    queryForm: {
                        equipmentId: '',
                        equipmentType: '',
                        status: ''
                    },
                    equipmentStatusData: [
                        {
                            equipmentId: 'HY-CRC001',
                            name: '湘D版湘莲专用冷藏车',
                            type: '冷藏车',
                            status: 'in_transit',
                            location: '京港澳高速-衡阳段',
                            lastUpdate: '2024-01-15 14:30:25',
                            nextMaintenance: '2024-02-15',
                            gpsCoordinates: '26.8934°N, 112.6071°E',
                            mileage: 28620,
                            temperatureStatus: 'normal',
                            fuelLevel: 75,
                            engineStatus: 'running',
                            lastMaintenance: '2023-12-15',
                            maintenanceMileage: 2620,
                            condition: '良好'
                        },
                        {
                            equipmentId: 'HY-CC001',
                            name: '衡阳黄花菜专用冷藏集装箱',
                            type: '冷藏集装箱',
                            status: 'available',
                            location: '衡阳市珠晖区物流园A区',
                            lastUpdate: '2024-01-15 14:25:10',
                            nextMaintenance: '2024-03-01',
                            gpsCoordinates: '26.8981°N, 112.6279°E',
                            mileage: 0,
                            temperatureStatus: 'normal',
                            fuelLevel: 0,
                            engineStatus: 'stopped',
                            lastMaintenance: '2024-01-01',
                            maintenanceMileage: 0,
                            condition: '优秀'
                        },
                        {
                            equipmentId: 'HY-MW001',
                            name: '衡阳茶油专用移动冷库',
                            type: '移动冷库',
                            status: 'reserved',
                            location: '衡阳市蒸湘区雁农特产仓储中心',
                            lastUpdate: '2024-01-15 12:15:00',
                            nextMaintenance: '2024-02-28',
                            gpsCoordinates: '26.8889°N, 112.5707°E',
                            mileage: 850,
                            temperatureStatus: 'normal',
                            fuelLevel: 90,
                            engineStatus: 'stopped',
                            lastMaintenance: '2023-11-28',
                            maintenanceMileage: 450,
                            condition: '良好'
                        },
                        {
                            equipmentId: 'HY-CRC002',
                            name: '湘D版衡阳特产冷藏车',
                            type: '冷藏车',
                            status: 'maintenance',
                            location: '衡阳市雁农设备维修中心',
                            lastUpdate: '2024-01-14 18:00:00',
                            nextMaintenance: '2024-01-20',
                            gpsCoordinates: '26.9004°N, 112.6070°E',
                            mileage: 42890,
                            temperatureStatus: 'abnormal',
                            fuelLevel: 20,
                            engineStatus: 'stopped',
                            lastMaintenance: '进行中',
                            maintenanceMileage: 3890,
                            condition: '维修中'
                        }
                    ],
                    currentPage: 1,
                    pageSize: 10,
                    total: 4,
                    detailDialogVisible: false,
                    historyDialogVisible: false,
                    trackingDialogVisible: false,
                    selectedEquipment: null,
                    usageHistory: [
                        {
                            startDate: '2024-01-01 08:00',
                            endDate: '2024-01-05 18:00',
                            customer: '衡阳湘莲合作社',
                            route: '衡阳-长沙',
                            distance: 160,
                            duration: 5,
                            status: 'completed'
                        },
                        {
                            startDate: '2024-01-10 09:00',
                            endDate: '2024-01-15 17:00',
                            customer: '衡阳祁东黄花菜专业合作社',
                            route: '衡阳祁东-衡阳市区',
                            distance: 45,
                            duration: 6,
                            status: 'completed'
                        },
                        {
                            startDate: '2024-01-16 07:00',
                            endDate: '预计2024-01-20',
                            customer: '衡阳南岳茶油加工厂',
                            route: '衡阳南岳-衡阳蒸湘区',
                            distance: 35,
                            duration: 5,
                            status: 'in_progress'
                        }
                    ],
                    trackingData: {
                        currentLocation: '京港澳高速衡阳服务区',
                        coordinates: '26.8934°N, 112.6071°E',
                        speed: 75,
                        direction: '北向',
                        estimatedArrival: '2024-01-16 15:30',
                        temperature: -8,
                        humidity: 50,
                        refrigerationStatus: '正常制冷'
                    }
                }
            },
            methods: {
                getStatusType(status) {
                    const typeMap = {
                        'available': 'success',
                        'in_transit': 'primary',
                        'maintenance': 'warning',
                        'reserved': 'info',
                        'fault': 'danger'
                    };
                    return typeMap[status] || 'info';
                },
                getStatusText(status) {
                    const textMap = {
                        'available': '可用',
                        'in_transit': '在途',
                        'maintenance': '维护中',
                        'reserved': '已预约',
                        'fault': '故障'
                    };
                    return textMap[status] || '未知';
                },
                searchEquipment() {
                    // 模拟搜索逻辑
                    this.$message.success('查询完成');
                },
                resetQuery() {
                    this.queryForm = {
                        equipmentId: '',
                        equipmentType: '',
                        status: ''
                    };
                },
                viewDetails(row) {
                    this.selectedEquipment = row;
                    this.detailDialogVisible = true;
                },
                viewHistory(row) {
                    this.selectedEquipment = row;
                    this.historyDialogVisible = true;
                },
                trackEquipment(row) {
                    this.selectedEquipment = row;
                    this.trackingDialogVisible = true;
                },
                scheduleAMaintenance() {
                    this.$prompt('请输入预计保养日期', '安排保养', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(({ value }) => {
                        this.$message.success('保养计划已安排，预计日期：' + value);
                        this.detailDialogVisible = false;
                    }).catch(() => {
                        this.$message.info('已取消');
                    });
                },
                exportHistory() {
                    this.$message.success('使用记录导出成功');
                },
                playTrack() {
                    this.$message.info('开始播放轨迹');
                },
                pauseTrack() {
                    this.$message.info('轨迹播放已暂停');
                },
                resetTrack() {
                    this.$message.info('轨迹已重置');
                },
                downloadTrackData() {
                    this.$message.success('轨迹数据下载成功');
                },
                handleSizeChange(val) {
                    this.pageSize = val;
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                }
            }
        });
    </script>

    <style scoped>
        .status-overview {
            margin-bottom: 30px;
        }
        
        .status-card {
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .status-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .status-card.available {
            border-left: 4px solid #67C23A;
        }
        
        .status-card.in-transit {
            border-left: 4px solid #409EFF;
        }
        
        .status-card.maintenance {
            border-left: 4px solid #E6A23C;
        }
        
        .status-card.reserved {
            border-left: 4px solid #909399;
        }
        
        .status-number {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }
        
        .status-label {
            color: #606266;
            margin-top: 5px;
        }
        
        .query-section {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .equipment-status-list {
            margin-bottom: 20px;
        }
        
        .pagination-wrapper {
            text-align: center;
            padding: 20px 0;
        }
        
        .detail-section {
            margin-bottom: 20px;
        }
        
        .detail-section h4 {
            color: #409EFF;
            border-bottom: 2px solid #409EFF;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .detail-section p {
            margin: 10px 0;
            line-height: 1.6;
        }
        
        .status-indicator {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        
        .status-indicator .label {
            color: #666;
        }
        
        .status-indicator .value {
            font-weight: bold;
        }
        
        .status-indicator .value.normal {
            color: #67C23A;
        }
        
        .status-indicator .value.abnormal {
            color: #F56C6C;
        }
        
        .map-container {
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .tracking-info {
            padding: 20px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        
        .tracking-info h4 {
            color: #409EFF;
            margin-bottom: 15px;
            border-bottom: 1px solid #409EFF;
            padding-bottom: 5px;
        }
        
        .tracking-info p {
            margin: 8px 0;
            line-height: 1.6;
        }
    </style>
</body>
</html>